<template>
    <div class="message-container">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>编辑短信内容</span>
                    </div>
                    <el-input  class="message-textarea" :rows="6" type="textarea" v-model="form.content1" :maxlength="contentMaxLen" show-word-limit></el-input>
                    <p>目前{{totalPhone}}个字符(空格占{{form.content1.length-form.content1.trim().length}}个未过滤)，最多输入{{contentMaxLen}}个字符</p>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>短信接收号码</span>
                        <el-button style="float: right; padding: 3px 0;color:#ff0000" type="text" @click="resetContent2()">清空</el-button>
                    </div>
                    <el-input  class="message-textarea" :rows="6" type="textarea" disabled v-model="form.content2"></el-input>
                    <p>目前已输入{{calcuTotalPhone()}}个号码，最多可发送{{phoneMaxNum}}个号码</p>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>从通讯录导出手机号</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="getPhoneInfo">确认</el-button>
                    </div>
                    <!--折叠面板-->
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item title="单位通讯录" name="1">
                            <el-tree
                                :props="defaultProps"
                                :load="loadNode1"
                                lazy
                                ref="tree1"
                                node-key="phnumId"
                                show-checkbox>
                            </el-tree>
                        </el-collapse-item>
                        <el-collapse-item title="个人通讯录" name="2">
                            <el-tree
                                :props="defaultProps"
                                :load="loadNode2"
                                lazy
                                ref="tree2"
                                node-key="phnumId"
                                show-checkbox>
                            </el-tree>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-button class="submit-row" type="success" @click="saveOrSubmitMsg(0)">
                保存
            </el-button>
            <el-button class="submit-row" type="success" @click="saveOrSubmitMsg(1)">
                发送
            </el-button>
        </el-row>
    </div>
</template>

<script>
import groupApi from '@/api/group'
import msgApi from '@/api/msg'
export default {
    data() {
        return {
            form: {
                content1: '',
                content2: '',
            },
            contentMaxLen: 202,
            phoneMaxNum: 998,
            totalPhone: 0,
            activeName:'1',
            defaultProps: {
                children: 'children',
                label: function(data,node){
                    if(data.name){
                        return data.name;
                    }else{
                        return data.username;
                    }    
                }
            },
            treePhoneData:[]
        }
    },
    methods: {
        //重置文本框;
        resetContent2(){
            this.form.content2 = '';
        },
        //计算号码个数
        calcuTotalPhone() {
            let count = 0;
            let arr = [];
            if(this.form.content2){
                arr = this.form.content2.split(';')
                count = arr.length;
                if(this.form.content2.charAt(this.form.content2.length-1) == ';'){
                    count--;
                }
            }
            return count;
        },
        //加载叶子节点
        loadNode1(node,resolve) {
            if(node.key){
                resolve([])
            }else{
            let params1 = {
                deptGpId: node.level==0?0:node.data.deptGpId
            }
            let params2 = {
                parentId: node.level==0?0:node.data.deptGpId
            }
            let arr1 = [];
            let arr2 = [];
            groupApi.queryAdminGroupPhnum(params1).then(res => {
                arr1 = res.data.page.records
            }).catch(res => {
                arr1 = [];
            })
            groupApi.queryDeptGroup(params2).then(res => {
                arr2 = res.data.data
            }).catch(res => {
                arr2 = [];
            })
            setTimeout(() => {resolve(arr2.concat(arr1))},500);  } 
           // 这里resolve的数据是后台给的,id用于之后点击发起请求时的参数
        },
        //
        loadNode2(node,resolve) {
            if(node.key){
                resolve([])
            }else{
            let params1 = {
                personGpId: node.level==0?0:node.data.personGpId
            }
            let params2 = {
                parentId: node.level==0?0:node.data.personGpId
            }
            let arr1 = [];
            let arr2 = [];
            groupApi.queryPersonGroupPhnum(params1).then(res => {
                arr1 = res.data.page.records
            }).catch(res => {
                arr1 = [];
            })
            
            groupApi.queryPersonGroup(params2).then(res => {
                arr2 = res.data.data
            }).catch(res => {
                arr2 = [];
            })
                setTimeout(() => {resolve(arr2.concat(arr1))},500);  }
        },
        //获取选中数据
        getPhoneInfo(){
            let arr1 = []
            let arr2 = []
            let mobile1 = []
            let mobile2 = []
            arr1 = this.$refs.tree1.getCheckedKeys()
            arr2 = this.$refs.tree2.getCheckedKeys()
            this.$refs.tree1.getCheckedNodes().map(item => {
                if(item.mobile){
                    mobile1.push(item.mobile)
                }
            })
            this.$refs.tree2.getCheckedNodes().map(item => {
                if(item.mobile){
                    mobile2.push(item.mobile)
                }
            })
            //去重
            this.treePhoneData = Array.from(new Set(arr1.concat(arr2)))
            this.form.content2 = Array.from(new Set(mobile1.concat(mobile2))).join(';')
        },
        //保存数据
        saveOrSubmitMsg(status) {
            let params = {
                content: this.form.content1, 
                states: status,
                acceptPersonInfo: this.treePhoneData.join(';')
            }
            msgApi.saveSendMsg(params).then(res => {
                    this.$message.success('成功');
                    location.reload();
                }).catch(() => {
                    this.$message.error('失败'); 
                })        
        }
    }
}
</script>

<style scoped>
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 10px 10px 0;
  }
  .submit-row{
      display: inline-flex;
      margin: 20px;
      width: 15%;
      justify-content: center;
  }
</style>
